<template>
  <div class="wh-offline-map">
    <gaode v-if="options.type === 1" ref="map"
      :loaded-map="loadedMap"
      @on-click-marker="onClickMarker"
      @on-click-polygon="onClickPolygon"
      @on-click-map="onClickMap" />
    <tiandi v-else-if="options.type === 2" ref="map"
      :loaded-map="loadedMap"
      @on-click-marker="onClickMarker"
      @on-click-polygon="onClickPolygon"
      @on-click-map="onClickMap" />
    <maptalks
      v-else-if="options.type === 3" ref="map"
      :loaded-map="loadedMap"
      @on-click-marker="onClickMarker"
      @on-click-polygon="onClickPolygon"
      @on-click-map="onClickMap" />
    <baidu
      v-else-if="options.type === 4" ref="map"
      :loaded-map="loadedMap"
      @on-click-marker="onClickMarker"
      @on-click-polygon="onClickPolygon"
      @on-click-map="onClickMap"
      @on-click-path="onClickPath" />
  </div>
</template>

<script>
import gaode from './components/gaode.vue'
import tiandi from './components/tiandi.vue'
import maptalks from './components/maptalks.vue'
import baidu from './components/baidu.vue'
import gcoord from './common/gcoord.cjs.js'
export default {
  name: 'wh-map',
  props: {
    loadedMap: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      /**
       * map 初始化的参数，
       * type 1  高德 2 天地图 3 maptalks 4  百度
       * loadConfig  地图加载的配置， 包括加载地图的 key， 密钥， 是否离线， 离线地址等
       * mapConfig 地图初始化的配置， 包括中心点， 缩放级别等
      */
      options: {
        type: 0,
        loadConfig: {},
        mapConfig: {}
      }
    }
  },
  components: {
    gaode,
    tiandi,
    maptalks,
    baidu
  },
  mounted() {
  },
  methods: {
    loadMap (options) {
      return new Promise((resolve, reject) => {
        if(!options) {
          console.warn('未配置地图');
          reject('未配置地图')
        } else {
          this.options = options

          if (this.options.mapConfig && this.options.mapConfig.center) {
            let crsFrom = options.coordinateFrom || 'GCJ02'
            if (this.options.type === 1) {
              this.options.mapConfig.center = gcoord.transform(this.options.mapConfig.center, gcoord[crsFrom], gcoord.GCJ02)
              if (this.options.mapConfig.bounds && this.options.mapConfig.bounds>0) {
                for (var i = 0; i < this.options.mapConfig.bounds.length; i++) {
                  this.options.mapConfig.bounds[i] = gcoord.transform(this.options.mapConfig.bounds[i], gcoord[crsFrom], gcoord.GCJ02)
                }
              }
            } else if (this.options.type === 2) {
              this.options.mapConfig.center = gcoord.transform(this.options.mapConfig.center, gcoord[crsFrom], gcoord.WGS84)
              if (this.options.mapConfig.bounds && this.options.mapConfig.bounds>0) {
                for (var i = 0; i < this.options.mapConfig.bounds.length; i++) {
                  this.options.mapConfig.bounds[i] = gcoord.transform(this.options.mapConfig.bounds[i], gcoord[crsFrom], gcoord.WGS84)
                }
              }
            } else if (this.options.type === 3) {
              this.options.mapConfig.center = gcoord.transform(this.options.mapConfig.center, gcoord[crsFrom], gcoord.WGS84)
              if (this.options.mapConfig.bounds && this.options.mapConfig.bounds>0) {
                for (var i = 0; i < this.options.mapConfig.bounds.length; i++) {
                  this.options.mapConfig.bounds[i] = gcoord.transform(this.options.mapConfig.bounds[i], gcoord[crsFrom], gcoord.WGS84)
                }
              }
            } else if (this.options.type === 4) {
              this.options.mapConfig.center = gcoord.transform(this.options.mapConfig.center, gcoord[crsFrom], gcoord.BD09)
              if (this.options.mapConfig.bounds && this.options.mapConfig.bounds>0) {
                for (var i = 0; i < this.options.mapConfig.bounds.length; i++) {
                  this.options.mapConfig.bounds[i] = gcoord.transform(this.options.mapConfig.bounds[i], gcoord[crsFrom], gcoord.BD09)
                }
              }
            }
          }
          this.$nextTick(() => {

            this.$refs.map.loadMap(this.options)
            // .then(res => {
            //   resolve(res)
            // })
          })
        }

      })
    },
    loadMarker (markerList) {
      for (var i = 0; i < markerList.length; i++) {
        const options = markerList[i].options?markerList[i].options:{}
        let crsFrom = options.coordinateFrom || 'GCJ02'
        for (var j = 0; j < markerList[i].list.length; j++) {
          if (this.options.type === 1) {
            markerList[i].list[j].position = gcoord.transform(markerList[i].list[j].position, gcoord[crsFrom], gcoord.GCJ02)
          } else if (this.options.type === 2)  {
            markerList[i].list[j].position = gcoord.transform(markerList[i].list[j].position, gcoord[crsFrom], gcoord.WGS84)
          } else if (this.options.type === 3) {
            markerList[i].list[j].position = gcoord.transform(markerList[i].list[j].position, gcoord[crsFrom], gcoord.WGS84)
          } else if (this.options.type === 4) {
            markerList[i].list[j].position = gcoord.transform(markerList[i].list[j].position, gcoord[crsFrom], gcoord.BD09)
          }
        }
      }
      this.$nextTick(() => {
        this.$refs.map.loadMarker(markerList)
      })
    },
    loadPolygon (polygonList) {
      for (var i = 0; i < polygonList.length; i++) {
        const options = polygonList[i].options?polygonList[i].options:{}
        let crsFrom = options.coordinateFrom || 'GCJ02'
        if (this.options.type === 1) {
          for (var j = 0; j < polygonList[i].path.length; j++) {
            polygonList[i].path[j] = gcoord.transform(polygonList[i].path[j], gcoord[crsFrom], gcoord.GCJ02)
          }
        } else if (this.options.type === 2)  {
          for (var j = 0; j < polygonList[i].path.length; j++) {
            polygonList[i].path[j] = gcoord.transform(polygonList[i].path[j], gcoord[crsFrom], gcoord.WGS84)
          }
        } else if (this.options.type === 3) {
          for (var j = 0; j < polygonList[i].path.length; j++) {
            polygonList[i].path[j] = gcoord.transform(polygonList[i].path[j], gcoord[crsFrom], gcoord.WGS84)
          }
        } else if (this.options.type === 4) {
          for (var j = 0; j < polygonList[i].path.length; j++) {
            polygonList[i].path[j] = gcoord.transform(polygonList[i].path[j], gcoord[crsFrom], gcoord.BD09)
          }
        }
      }

      this.$nextTick(() => {
        this.$refs.map.loadPolygon(polygonList)
      })
    },
    loadPath (config) {
      if (config.list) {
        const options = config.options?config.options:{}
        let crsFrom = options.coordinateFrom || 'GCJ02'
        for (var i = 0; i < config.list.length; i++) {

          if (this.options.type === 1) {
            for (var j = 0; j < config.list[i].path.length; j++) {
              config.list[i].path[j] = gcoord.transform(config.list[i].path[j], gcoord[crsFrom], gcoord.GCJ02)
            }
          } else if (this.options.type === 2)  {
            for (var j = 0; j < config.list[i].path.length; j++) {
              config.list[i].path[j] = gcoord.transform(config.list[i].path[j], gcoord[crsFrom], gcoord.WGS84)
            }
          } else if (this.options.type === 3) {
            for (var j = 0; j < config.list[i].path.length; j++) {
              config.list[i].path[j] = gcoord.transform(config.list[i].path[j], gcoord[crsFrom], gcoord.WGS84)
            }
          } else if (this.options.type === 4) {
            for (var j = 0; j < config.list[i].path.length; j++) {
              config.list[i].path[j] = gcoord.transform(config.list[i].path[j], gcoord[crsFrom], gcoord.BD09)
            }
          }
        }
      }
      this.$nextTick(() => {
        this.$refs.map.loadPath(config)
      })
    },
    loadSpecialPath (config) {
      if (config.list) {
        const options = config.options?config.options:{}
        let crsFrom = options.coordinateFrom || 'GCJ02'
        for (var i = 0; i < config.list.length; i++) {

          if (this.options.type === 1) {
            for (var j = 0; j < config.list[i].path.length; j++) {
              config.list[i].path[j] = gcoord.transform(config.list[i].path[j], gcoord[crsFrom], gcoord.GCJ02)
            }
          } else if (this.options.type === 2)  {
            for (var j = 0; j < config.list[i].path.length; j++) {
              config.list[i].path[j] = gcoord.transform(config.list[i].path[j], gcoord[crsFrom], gcoord.WGS84)
            }
          } else if (this.options.type === 3) {
            for (var j = 0; j < config.list[i].path.length; j++) {
              config.list[i].path[j] = gcoord.transform(config.list[i].path[j], gcoord[crsFrom], gcoord.WGS84)
            }
          } else if (this.options.type === 4) {
            for (var j = 0; j < config.list[i].path.length; j++) {
              config.list[i].path[j] = gcoord.transform(config.list[i].path[j], gcoord[crsFrom], gcoord.BD09)
            }
          }
        }
      }
      this.$nextTick(() => {
        this.$refs.map.loadSpecialPath(config)
      })
    },
    onClickMarker (e, data, infoWindow) {
      this.$emit('on-click-marker', e, data, infoWindow)
    },
    onClickPolygon (e, data, infoWindow) {
      this.$emit('on-click-polygon', e, data, infoWindow)
    },
    onClickMap (e) {
       this.$emit('on-click-map', e)
    },
    onClickPath () {
      this.$emit('on-click-path', e, data, infoWindow)
    },
    closeInfoWindow () {
      this.$refs.map.onCloseInfoWindow()
    }
  },
}
</script>

<style scoped>
  .wh-offline-map {
    width: 100%;
    height: 100%;
    min-height: 400px;
  }
</style>
